<script setup lang="ts">
// 表单级验证

const validationSchema = {
  // 验证用户名
  username: (value: unknown) => {
    if (!value) return "请输入用户名";
    if (typeof value !== "string") return "用户名类型错误";
    if (value.length < 2) return "用户名的长度不能小于2";
    return true;
  },
  // 验证密码
  password: (value: unknown) => {
    if (!value) return "请输入密码";
    if (typeof value !== "string") return "密码字段的类型错误";
    if (value.length < 6) return "密码的长度不能小于6";
    return true;
  },
};

// useForm: 创建一个表单级验证对象
// useFieldModel: 用于获取表单项对象,使用获取到的表单项对象和真正的表单项进行绑定
// errors: 错误信息对象, 如果表单项没有验证通过,那么表单项就会出现在 errors 对象
const {
  useFieldModel,
  errors,
  handleSubmit,
  setFieldValue,
  handleReset,
  setValues,
} = useForm({
  // 指定表单项的验证规则
  validationSchema,
  // 组件挂载完成后进行主动验证(不生效)
  validateOnMount: false,
  // 表单初始值
  initialValues: {
    username: "",
    password: "",
  },
});

// 获取用户名表单项对象、获取密码表单项对象
const [username, password] = useFieldModel(["username", "password"]);

// onSubmit: 表单提交的事件处理函数, 需要和表单的 onSubmit 事件进行绑定
// 好处是当表单没有验证通过时阻止表单提交
const onSubmit = handleSubmit((value) => {
  // value: 用户在表单中输入的值
  // 当前函数在表单验证通过时执行
  console.log(value);
});

// 设置表单值
function onSetFieldValue() {
  // setFieldValue("username", "李四");
  // setFieldValue("password", "123456");
  setValues({ username: "王五", password: "123456" });
}
</script>

<template>
  <form class="container mt-6" @submit="onSubmit">
    <div class="field">
      <label class="label">用户名</label>
      <div class="control has-icons-left">
        <input
          v-model="username"
          class="input"
          type="text"
          placeholder="请输入用户名"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </div>
      <p class="help is-danger" v-if="errors.username">{{ errors.username }}</p>
    </div>
    <div class="field">
      <label class="label">密码</label>
      <div class="control has-icons-left">
        <input
          v-model="password"
          class="input"
          type="password"
          placeholder="请输入密码"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-key"></i>
        </span>
      </div>
      <p class="help is-danger" v-if="errors.password">{{ errors.password }}</p>
    </div>
    <div class="field is-grouped">
      <div class="control">
        <button type="submit" class="button is-link">提交</button>
      </div>
      <div class="control">
        <button
          type="button"
          @click="handleReset"
          class="button is-link is-light"
        >
          重置
        </button>
      </div>
      <div class="control">
        <button
          type="button"
          @click="onSetFieldValue"
          class="button is-link is-light"
        >
          设置表单值
        </button>
      </div>
    </div>
  </form>
</template>

<style lang="less" scoped>
@import "https://bulma.io/vendor/fontawesome-free-5.15.2-web/css/all.min.css";
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
</style>